<template>
	<div id="app">
		<div class="login-container">
			<!-- 左边框 -->
			<div class="login-weaper">
				<div class="login-left">
					<div class="login-time">欢迎使用</div>
					<img src="../assets/zxwy.jpg" alt="智学无忧" class="login-img" />
					<p class="login-title">智学无忧商城后台登录</p>
				</div>
				<!-- 右边框 -->
				<div class="login-right">
					<div class="login-control">
						<div class="logins-title">登录</div>
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<el-form-item prop="username">
								<i class="el-icon-user"></i>
								<el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<i class="el-icon-key"></i>
								<el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" show-password autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item prop="Verification">
								<i class="el-icon-position"></i>
								<el-input type="text" v-model="ruleForm.verification" autocomplete="off"></el-input>
								<p class="serchnumber">验证码</p>
							</el-form-item>
							<div class="remenber">
								<el-checkbox-group v-model="ruleForm.type">
									<el-checkbox label="记住密码" name="type"></el-checkbox>
								</el-checkbox-group>
								<!-- <el-checkbox v-model="ruleForm.type" name="type">记住密码</el-checkbox> -->
							</div>
							<el-form-item>
								<el-button type="primary" plain @click="submitForm('ruleForm')" class="newlogin">登录</el-button>
							</el-form-item>
						</el-form>
						<div class="developers">
							<a href="#">开发者:</a>
							<a href="#">xxx</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import Cookie from "js-cookie";
	import Base from "../Base64";
	export default {
		data() {
			return {
				ruleForm: {
					// 用户名
					username: "",
					// 密码
					password: "",
					// 类型
					type: "",
					// 验证码
					verification: "666666",
				},
				rules: {
					username: [{
						// 要求
						required: true,
						trigger: "blur",
					}, ],
					password: [{
						// 要求
						required: true,
						trigger: "blur",
					}, ],
				},
			};
		},
		methods: {
			//字符串解码
			decrypt() {
				let password = Cookie.get("password");
				let username = Cookie.get("username");
				if (password == null && username == null) {
					this.ruleForm.type = false;
				} else {
					this.ruleForm.type = true;
					this.ruleForm.password = Base.decode(password);
					this.ruleForm.username = Base.decode(username);
				}
			},
			// 点击登录
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.axios
							.get(
								"http://192.168.1.84:8081/m.api?_gp=admin&_mt=login&username=" +
								this.ruleForm.username +
								"&password=" +
								this.ruleForm.password +
								"&verifyCode=666666"
							)
							.then((res) => {
                //路由守卫利用js实现页面的跳转操作
                const url = this.$route.query.returnUrl || "/About";
									this.$router.push(url);
								let seconds = 3600; //令牌一小时失效的时间
								let expires = new Date(new Date() * 1 + seconds * 1000);
								if (res.data.errmsg == "成功") {
									Cookie.set("token", res.data.data, {
										expires: expires,
									});
									// 记住密码
									if (this.ruleForm.type == true) {
										Cookie.set("username", Base.encode(this.ruleForm.username));
										Cookie.set("password", Base.encode(this.ruleForm.password));
									} else {
										Cookie.remove("username");
										Cookie.remove("password");
                  }
									this.$message.success({
										message: "登录成功",
									});
									this.$router.push({
										path: "/FirstPage",
									});
								} else if (res.data.errno === 50001) {
									this.$message.error("管理员不存在 异常代码:" + res.data.errno);
								} else if (res.data.errno === 50002) {
									this.$message.error("密码错误 异常代码:" + res.data.errno);
								}
							}); 
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		},
		// 创建后
		created() {
			this.decrypt();
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	/* 背景图片的标签 */
	.login-container {
		width: 100%;
		height: 100%;
		display: flex;
		margin: 0 auto;
		position: fixed;
		align-items: center;
		background: url("../assets/bluesky.jpg") 0 bottom repeat-x #049ec4;
	}

	/* 左右边框的父级标签 */
	.login-weaper {
		width: 1000px;
		margin: 0 auto;
		box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
	}

	/* 左边框 */
	.login-left {
		width: 50%;
		height: 500px;
		float: left;
		color: #fff;
		position: relative;
		flex-direction: column;
		justify-content: center;
		background-color: #409eff;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	/* 左边框-欢迎使用 */
	.login-time {
		left: 25px;
		top: 25px;
		width: 100%;
		opacity: 0.9;
		color: #fff;
		text-align: left;
		font-size: 18px;
		font-weight: 200;
		overflow: hidden;
		position: absolute;
	}

	/* 左边框-智学无忧图片 */
	.login-img {
		width: 100px;
		height: 100px;
		line-height: 100px;
		border-radius: 50%;
		text-align: center;
		padding-top: 140px;
		margin-left: 200px;
	}

	/* 左边框-智学无忧商城后台登录 */
	.login-title {
		color: #fff;
		font-size: 25px;
		font-weight: 300;
		margin-top: 60px;
		text-align: center;
		letter-spacing: 2px;
	}

	/* 右边框 */
	.login-right {
		width: 50%;
		height: 500px;
		float: left;
		border-left: none;
		box-sizing: border-box;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		background-color: #f5f7fa;
	}

	/* 右边框-登录 */
	.logins-title {
		color: #333;
		font-size: 22px;
		font-weight: 500;
		margin-top: 55px;
		text-align: center;
		margin-bottom: 40px;
		letter-spacing: 15px;
	}

	/* 右边框-主要内容 */
	.login-control {
		width: 65%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	/* 右边框-表单 */
	.demo-ruleForm {
		margin: 10px 0;
	}

	// 修改自带样式让内容居中
	.el-form-item /deep/ .el-form-item__content {
		display: flex;
		line-height: 0;
		align-items: center;
		margin-left: 0 !important;
	}

	// 输入框样式
	.el-input /deep/ .el-input__inner {
		width: 100%;
		height: 40px;
		outline: 0;
		border: none;
		padding: 0 15px;
		color: #606266;
		line-height: 40px;
		border-radius: 4px;
		font-size: inherit;
		display: inline-block;
		box-sizing: border-box;
		background-image: none;
		-webkit-appearance: none;
		background-color: #f5f7fa;
		border-bottom: 1px solid #dcdfe6;
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.el-form /deep/ .el-form-item__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
		padding-top: 4px;
		position: absolute;
		top: 100%;
		left: 35px;
	}

	// 验证码
	.serchnumber {
		width: 100px;
		text-align: left;
	}

	.newlogin {
		width: 100%;
		height: 45px;
		background: none;
		font-size: 18px;
		font-weight: 300;
		color: #409eff;
		cursor: pointer;
		margin-top: 30px;
		font-family: "neo";
		transition: 0.25s;
		letter-spacing: 2px;
		border: 1px solid #409eff;
	}

	.developers {
		width: 100%;
		margin-top: 40px;
		text-align: center;
	}

	.developers a {
		color: #999;
		font-size: 12px;
		margin: 0px 8px;
	}
</style>
